<?php session_start();
// 获取cites里的city 城市名称
$a = mysqli_connect("localhost", "root", "deng123", "housekeeping", "3306") or die("unable to connect");
@$query = "SELECT city FROM cities";
// 获取过来的city 插入到 select 标签里
$result = mysqli_query($a, $query);
$options = "<option value='' selected disabled>--选择城市--</option>";

while ($row = mysqli_fetch_array($result)) {
    $options .= "<option value='" . $row['city'] . "'>" . $row['city'] . "</option>";
}

if (!isset($_SESSION["username"])) {
    header("Location:index.php");
} else {
    $username = $_SESSION['username'];
?>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <!-- Required meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>好先生 | 家政服务</title>
        <link rel="shortcut icon" href="../img/favicon.ico" />
        <!-- Icons font CSS-->
        <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="../vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
        <link rel="stylesheet" href="../vendor/simple-line-icons/css/simple-line-icons.css">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
        <link href="../vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
        <link href="../vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">

        <!-- Font special for pages-->
        <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

        <!-- Vendor CSS-->
        <link href="../vendor/select2/select2.min.css" rel="stylesheet" media="all">
        <link href="../css/hover-min.css" rel="stylesheet">


        <!-- Main CSS-->
        <link href="../css/style.css" rel="stylesheet" media="all">
        <link href="../css/main.css" rel="stylesheet" media="all">
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const selectElement = document.querySelector('select[name="city"]');
                const inputElement = document.querySelector('input[name="city"]');
                selectElement.addEventListener('change', function() {
                    if (this.value === '其他') {
                        selectElement.style.display = 'none';
                        inputElement.style.display = 'block';
                    }
                });
                inputElement.addEventListener('keydown', function(event) {
                    if (event.key === 'Enter') {
                        selectElement.style.display = 'block';
                        inputElement.style.display = 'none';
                        // 创建一个新的 option 元素
                        let newOption = document.createElement('option');
                        newOption.value = this.value;
                        newOption.textContent = this.value;
                        // 将新创建的 option 元素添加到 select 元素中
                        selectElement.appendChild(newOption);
                    }
                });
                inputElement.addEventListener('blur', function() {
                    selectElement.style.display = 'block';
                    inputElement.style.display = 'none';
                    // 创建一个新的 option 元素
                    let newOption = document.createElement('option');
                    newOption.value = this.value;
                    newOption.textContent = this.value;
                    // 将新创建的 option 元素添加到 select 元素中
                    selectElement.appendChild(newOption);
                });

            }, false);
        </script>
        <style>
            .showInput {
                display: none;
            }
        </style>
    </head>

    <body>
        <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background:-webkit-gradient(linear, right top, left top, from(#1da1f2), to(#005f7f));" id="mainNav">
            <div class="container">
                <div class="navbar-header">
                    <a class=" nav-link js-scroll-trigger" href="#top">
                        <img class="img-rounded" src="../img/logo.png" />
                    </a>
                </div>
                &nbsp;
                <a class="navbar-brand " href="#page-top">
                    <h2><small style="font-family: Arial;border-bottom: 2px solid gainsboro">管理员面板</small></h2>
                </a>
                <button class="navbar-toggler navbar-toggler-right ml-auto" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    菜单
                    <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger hvr-glow" href="profile.php">详情</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger hvr-glow " href="workers.php">员工</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger hvr-glow " href="customers.php">顾客</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger hvr-glow " href="#">预定</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger hvr-glow " href="queries.php">反馈</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger hvr-glow " href="logout.php">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <section class="features tb bb" id="features">

            <br><br><br>
            <center>
                <h3 style="font-size: 40px" class="text-light"><u>定位相关城市的服务收付款情况</u></h3>
            </center><br>
            <center>
                <div class="col-md-9">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <form action="bookings_next.php" method="post">
                                <div class="register-form">
                                    <div class="row">
                                        <div class="col-md-3"></div>
                                        <div class="col-md-6 ">
                                            <div class="form-group">
                                                <select name="city" required="required" class="form-control">
                                                    <?php
                                                    echo $options;
                                                    ?>
                                                </select>
                                                <input type="text" name="custom_city" class="form-control custom-input showInput">
                                            </div><br>
                                        </div>
                                        <div class="col-md-3"></div>
                                        <div class="col-md-3"></div>
                                        <div class="col-md-6 ">
                                            <div class="form-group">
                                                <select name="category" required="required" class="form-control">
                                                    <option value="" selected disabled>--选择 类型--</option>
                                                    <option value="保姆">保姆</option>
                                                    <option value="修理">修理</option>
                                                    <option value="装修">装修</option>
                                                    <option value="美容">美容</option>
                                                    <option value="摄影">摄影</option>
                                                    <option value="家教">家教</option>
                                                    <option value="打包 & 搬运">打包 & 搬运</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-1"></div>
                                        <div class="col-md-7">
                                            <div class="form-group">
                                                <input type="submit" class="btnRegister" value="搜索" />
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </center>
            <br>
        </section>
        <!-- Jquery JS-->
        <script src="../vendor/jquery1/jquery.min.js"></script>
        <!-- Vendor JS-->
        <script src="../vendor/select2/select2.min.js"></script>
        <script src="../vendor/jquery-validate/jquery.validate.min.js"></script>
        <script src="../vendor/bootstrap-wizard/bootstrap.min.js"></script>
        <script src="../vendor/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
        <script src="../vendor/datepicker/moment.min.js"></script>
        <script src="../vendor/datepicker/daterangepicker.js"></script>
        <script src="../vendor/jquery/jquery.min.js"></script>
        <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

        <!-- Plugin JavaScript -->
        <script src="../vendor/jquery-easing/jquery.easing.min.js"></script>


        <script src="../js/new-age.min.js"></script>

        <!-- Main JS-->
        <script src="../js/global.js"></script>
        <footer>
            <div class="container">
                <p>&copy; 好先生 家政服务. 版权所有.</p>
                <ul class="list-inline">
                    <li class="list-inline-item">
                        <a href="#">隐私</a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#">条款</a>
                    </li>
                </ul>
            </div>
        </footer>
    </body>

    </html>
    <!-- end document-->

<?php
}
?>